<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        详情
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../../css/main.css" media="all">
    <script type="text/javascript" src="../../../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../../../css/bootstrap.css">
    <link rel="stylesheet" href="../../../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .table-bordered tr td:nth-child(odd) {
            background: #f1f1f1;
            width: 15%;
        }

        .table-bordered tr td:nth-child(even) {
            width: 16%;
        }
    </style>
</head>

<body>
<div>
    <div id="app">

        <div class="layui-card-body">
            <div class="table-responsive">
                <h5><b>入库信息</b></h5>
                <table class="table table-bordered">
                    <tr>
                        <td>入库类型</td>
                        <td>{{materialInfo.joinFormData.joinTypeName }}</td>
                        <td>入库库房</td>
                        <td>{{materialInfo.joinFormData.warehouseName }}</td>
                        <td>入库日期</td>
                        <td>{{materialInfo.joinFormData.joinTime }}</td>
                    </tr>
                    <tr>
                        <td>采购人员</td>
                        <td>{{materialInfo.joinFormData.buyerName }}</td>
                        <td>入库人员</td>
                        <td>{{materialInfo.joinFormData.joinerName }}</td>
                        <td>添加时间</td>
                        <td>{{materialInfo.joinFormData.addTime }}</td>
                    </tr>
                    <tr>
                        <td>入库备注</td>
                        <td colspan="5">{{materialInfo.joinFormData.remark }}</td>
                    </tr>
                </table>

                <h5><b>入库配件</b></h5>
                <table class="layui-table" >
                    <tr>
                        <td>物料号</td>
                        <td>配件名称</td>
                        <td>规格型号</td>
                        <td>入库数量</td>
                        <td>物料批次</td>
                        <td>供应商</td>
                        <td>配件单价</td>
                        <td>配件总价</td>
                        <td colspan="2">存放位置</td>
                        <td>配件图片</td>
                        <td>采购凭证</td>
                        <td>备注</td>
<!--                        <td>操作</td>-->
                    </tr>
                    <tr>
                        <td>{{materialInfo.kfPartsmsg.partsNum}}</td>
                        <td>{{materialInfo.kfPartsmsg.partsName}}</td>
                        <td>{{materialInfo.kfPartsmsg.specification}}</td>
                        <td>{{materialInfo.kfPartsmsg.partsCount}}</td>
                        <td>{{materialInfo.kfPartsmsg.partsMark}}</td>
                        <td>{{materialInfo.kfPartsmsg.supplierName}}</td>
                        <td>{{materialInfo.kfPartsmsg.partsOneprice}}</td>
                        <td>{{materialInfo.kfPartsmsg.partsAllprice}}</td>
                        <td>{{materialInfo.kfPartsmsg.site}}</td>
                        <td>
<!--                            <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn" @click="showImg()">-->
<!--                                <i class="layui-icon">&#xe64a;</i>-->
<!--                                {{materialInfo.kfPartsmsg.siteImgNum}}-->
<!--                            </button>-->
                            <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn" @click="openSitemsg()">
                                <i class="layui-icon">&#xe64a;</i>
                                {{materialInfo.kfPartsmsg.siteImgNum}}
                            </button>
                        </td>
                        <td>
                            <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn" @click="openPartsmsg()">
                                <i class="layui-icon">&#xe64a;</i>
                                {{materialInfo.kfPartsmsg.partsmsgImgNum}}
                            </button>

                        </td>
                        <td>
                            <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn" @click="openPayEvidenceImg()">
                                <i class="layui-icon">&#xe64a;</i>
                                {{materialInfo.kfPartsmsg.payEvidenceImgNum}}
                            </button>

                        </td>
                        <td>
                            {{materialInfo.kfPartsmsg.partsmsgRemark}}
                        </td>
<!--                        <td>-->
<!--                            操作-->
<!--                        </td>-->
                    </tr>
                </table>
            </div>
        </div>
        <br><br><br><br><br><br>
    </div>

    <!-- 选择配件  弹窗  开始 -->
<!--    <div class="modal fade" id="showImagModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">-->
<!--        <div class="modal-dialog modal-lg">-->
<!--            <div class="modal-content">-->
<!--                <div class="modal-body">-->
<!--                    <div class="layui-card-body">-->
<!--                        <div id="layer-photos-demo" class="layer-photos-demo" v-for="(item,index) in imgUrlArr">-->
<!--                            <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="modal-footer" id="demoTable">-->
<!--                    <button type="button" class="layui-btn" data-dismiss="modal">关闭</button>-->
<!--                </div>-->
<!--            </div>&lt;!&ndash; /.modal-content &ndash;&gt;-->
<!--        </div>&lt;!&ndash; /.modal &ndash;&gt;-->
<!--    </div>-->
    <!-- 选择配件  弹窗  结束 -->

</div>
</body>


<script type="text/javascript" src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../../js/pub.js"></script>
<script type="text/javascript" src="../../../../lib/layui/layui2.5.7.js"></script>
<script type="text/javascript" src="../../../../js/vue.min.js"></script>
<!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
<script src="../../../../js/x-layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function () {
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element;//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层
        var form = layui.form;
        okLoading.close($);

        layer.photos({
            photos: '#layer-photos-demo'
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    });
    // /*打开选择配件弹窗*/
    // function openShowImgModel(){
    //     // document.getElementById("addProLinkmanForm").reset();
    //
    //     $('#showImagModal').modal('show');
    // };
    // /*弹窗关闭*/
    // function closeMe(){
    //     $('#showImagModal').modal('hide');
    // }
</script>

<script>
    let recordId = getQueryVariable("recordId");
    var vm = new Vue({
        el: "#app",
        data: {
            recordId,
            materialInfo: {
                joinFormData:{},
                kfPartsmsg:{}
            }
        },
        mounted() {
            let request = {
                url: 'kf/partsJoinWarehouse/getpartsmsgDataMsg',
                data: {
                    userId: $userId,
                    id: recordId
                },
                method: "GET",
            };
            sendRequest(request, (res) => {
                if (res.data.kfPartsmsg.siteImg == null || res.data.kfPartsmsg.siteImg == "") {
                    res.data.kfPartsmsg.siteImgNum = 0;
                }else {
                    res.data.kfPartsmsg.siteImgNum = res.data.kfPartsmsg.siteImg.split('|').length;
                }

                if (res.data.kfPartsmsg.partsmsgImg == null || res.data.kfPartsmsg.partsmsgImg == "") {
                    res.data.kfPartsmsg.partsmsgImgNum = 0;
                }else {
                    res.data.kfPartsmsg.partsmsgImgNum = res.data.kfPartsmsg.partsmsgImg.split('|').length;
                }

                if (res.data.kfPartsmsg.payEvidenceImg == null || res.data.kfPartsmsg.payEvidenceImg == "") {
                    res.data.kfPartsmsg.payEvidenceImgNum = 0;
                }else {
                    res.data.kfPartsmsg.payEvidenceImgNum = res.data.kfPartsmsg.payEvidenceImg.split('|').length;
                }
                this.materialInfo.joinFormData = res.data.joinFormData;

                this.materialInfo.kfPartsmsg = res.data.kfPartsmsg;
            });
        },
        methods: {
            openSitemsg: function () {
                var that = this;
                // this.recorfIndex = index;
                const strdata = "{\"title\": \"\", \"id\": 123,\"start\": 0,\"data\": [";
                let imgdata = "";
                if (that.materialInfo.kfPartsmsg.siteImg
                    == null || that.materialInfo.kfPartsmsg.siteImg == "") {
                    layer.msg("未上传图片！", {
                        icon: 7
                    });
                    return false;
                }
                const arr  = that.materialInfo.kfPartsmsg.siteImg.split('|');
                // /*打开弹窗*/
                // $('#showImagModal').modal('show');
                for(let i = 0 ; i < arr.length ; i++){
                    if(i == 0){
                        imgdata = imgdata + "{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+arr[i] + "\",\"thumb\": \"\" }";
                    }else{
                        imgdata = imgdata + ",{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+arr[i] + "\",\"thumb\": \"\" }";
                    }
                }
                const jsondata = strdata + imgdata + "]}";
                const obj = JSON.parse(jsondata);
                layer.photos({
                    photos: obj
                    ,shift: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });

            },
            openPartsmsg: function () {
                var that = this;
                // this.recorfIndex = index;
                const strdata = "{\"title\": \"\", \"id\": 123,\"start\": 0,\"data\": [";
                let imgdata = "";
                if (that.materialInfo.kfPartsmsg.partsmsgImg
                    == null || that.materialInfo.kfPartsmsg.partsmsgImg == "") {
                    layer.msg("未上传图片！", {
                        icon: 7
                    });
                    return false;
                }
                const arr  = that.materialInfo.kfPartsmsg.partsmsgImg.split('|');
                // /*打开弹窗*/
                // $('#showImagModal').modal('show');
                for(let i = 0 ; i < arr.length ; i++){
                    if(i == 0){
                        imgdata = imgdata + "{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+arr[i] + "\",\"thumb\": \"\" }";
                    }else{
                        imgdata = imgdata + ",{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+arr[i] + "\",\"thumb\": \"\" }";
                    }
                }
                const jsondata = strdata + imgdata + "]}";
                const obj = JSON.parse(jsondata);
                layer.photos({
                    photos: obj
                    ,shift: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });

            },
            openPayEvidenceImg: function () {
                var that = this;
                // this.recorfIndex = index;
                const strdata = "{\"title\": \"\", \"id\": 123,\"start\": 0,\"data\": [";
                let imgdata = "";
                if (that.materialInfo.kfPartsmsg.payEvidenceImg
                    == null || that.materialInfo.kfPartsmsg.payEvidenceImg == "") {
                    layer.msg("未上传图片！", {
                        icon: 7
                    });
                    return false;
                }
                const arr  = that.materialInfo.kfPartsmsg.payEvidenceImg.split('|');
                // /*打开弹窗*/
                // $('#showImagModal').modal('show');
                for(let i = 0 ; i < arr.length ; i++){
                    if(i == 0){
                        imgdata = imgdata + "{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+arr[i] + "\",\"thumb\": \"\" }";
                    }else{
                        imgdata = imgdata + ",{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+arr[i] + "\",\"thumb\": \"\" }";
                    }
                }
                const jsondata = strdata + imgdata + "]}";
                const obj = JSON.parse(jsondata);
                layer.photos({
                    photos: obj
                    ,shift: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });

            },
        }

    });


</script>


</html>
